<template>
	<div class="assessment-edit-plan-container">
		<div class="my-form-container">
		
			<el-row class="my-form-item" style="height: 20%">
				<el-col :span="12">
					<div class="my-form-item-label">姓      名</div>
					<div class="my-form-item-value">张三</div>
				</el-col>
				<el-col :span="12">
					<div class="my-form-item-label">学      号：</div>
					<div class="my-form-item-value">23546540</div>
				</el-col>
			</el-row>
			<el-row class="my-form-item" style="height: 20%">
				<el-col :span="12">
					<div class="my-form-item-label">级      次：</div>
					<div class="my-form-item-value">2019</div>
				</el-col>
				<el-col :span="12">
					<div class="my-form-item-label">队      别</div>
					<div class="my-form-item-value">队别2</div>
				</el-col>
			</el-row>
			<el-row class="my-form-item" style="height: 20%">
				<el-col :span="12">
					<div class="my-form-item-label">专      业：</div>
					<div class="my-form-item-value">计算机</div>
				</el-col>
				<el-col :span="12">
					<div class="my-form-item-label">选择缓考课程</div>
					<div class="cz-save "  @click="showYprDialog = true">
             		
              			<span>请选择</span>
            
          			</div>
				</el-col>
			</el-row>
			<el-row class="my-form-item" style="height: 10%">
				<el-col :span="24">
					<div class="my-form-item-label">上传材料证明</div>
					<div class="my-form-item-value">
						<div class="cz-save" style="margin-top: 0px;margin-left: 0px;">上传附件</div>
					</div>
				</el-col>
				
			</el-row>
			
		
			<el-row class="my-form-item" style="height: 30%;border: none">
				<el-col :span="24">
					<div class="my-form-item-label">缓考原因：</div>
					<div class="my-form-item-value assessment-design">
						<el-input v-model="design" type="textarea" :rows="9" style="width: 969px;" placeholder="请输入内容"></el-input>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="button-group">
			<div class="">保存</div>
			<div class="">保存并提交</div>
		</div>
	<el-dialog title="选择缓考课程" :visible.sync="showYprDialog" width="983px" style="height:832px" class="szjky">
      <div class="choose-ypr-container">
        <div class="choose-ypr-search-container">
          <span class="title">2021年秋季学期课程：</span>
         
          <div class="button-list">
            <div
              class="button-item"
              v-for="(item, index) in searchNameList"
              :key="index"
              @click="delTag(index)"
            >
              <img
                class="del-icon"
                src="../../../assets/assessment/approval-del.png"
                alt=""
              />
              <div>{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="choose-ypr-table-container">
          <el-table
            :data="yprList"
            border
            style="width: 100% "
            class="table-data"
            row-class-name="row-class"
            cell-class-name="cell-class"
            header-row-class-name="header-row-class"
            header-cell-class-name="header-cell-class"
          >
            <el-table-column
              prop=""
              label="选择"
              width="122"
              align="center"
              class-name=""
              label-class-name=""
            >
              <template slot-scope="scope">
                <el-checkbox></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="系"
               width="122"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="sex" label="研究室"  width="122" align="center">
            </el-table-column>
            <el-table-column
              prop="company"
              label="课程编号"
              width="122"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="position" label="课程名称"  width="122" align="center">
            </el-table-column>
            <el-table-column prop="kcjy" label="课程教员"  width="122" align="center">
            </el-table-column>
            <el-table-column prop="ksrq" label="考试日期"  width="122" align="center">
            </el-table-column>
             <el-table-column prop="js" label="节次" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showYprDialog = false">确 定</button>
      </span>
    </el-dialog>
	</div>
	
</template>

<script>
  export default {
		data(){
		  return {
			  	showYprDialog: false,
				searchNameList: [],
		yprList: [
        {
          id: 1,
          name: "基础教学系",
          sex: "政治研究室",
          company: "3423512",
          position: "英语",
          kcjy: "张三", 
          ksrq: "2018-2-12",  
          js: "1-2",
        },
        {
          id: 2,
          name: "基础教学系",
          sex: "政治研究室",
          company: "3423512",
          position: "美术",
          kcjy: "张三", 
          ksrq: "2018-2-12",  
          js: "1-2",
        },
        {
          id: 2,
          name: "基础教学系",
          sex: "政治研究室",
          company: "3423512",
          position: "美术",
          kcjy: "张三", 
          ksrq: "2018-2-12",  
          js: "1-2",
        },
        {
          id: 2,
          name: "基础教学系",
          sex: "政治研究室",
          company: "3423512",
          position: "体育",
          kcjy: "张三", 
          ksrq: "2018-2-12",  
          js: "1-2",
        },
        {
          id: 2,
          name: "基础教学系",
          sex: "政治研究室",
          company: "3423512",
          position: "英语",
          kcjy: "张三", 
          ksrq: "2018-2-12",  
          js: "1-2",
        },
      ],
        design: '',
		xq: "请选择",
      	xqList: [
        {
          value: "英语",
          label: "英语",
        },
        {
          value: "数学",
          label: "数学",
        },
      ],
			}
		}
  };
</script>
<style lang="less" scoped>
	.cz-save{
		box-sizing: border-box;
    width: 78px;
    height: 24px;
    line-height: 44px;
    border-radius: 4px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-align: center;
    margin-top: 70px;
    margin-left: 40px;
    display: flex;
    flex-direction: row;
    border: 1px solid #02C86C;
    cursor: pointer;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: #F1FFF8;
    color: #02C86C;
	}
	.my-form-item-value{
		font-size: 16px;
    color: #004CA7;
    height: 100%;
    flex: 1;
    line-height: 60px;
    padding-left: 38px;
    display: flex;
    align-items: center;
	}
	.assessment-edit-plan-container{
		.assessment-design {
			.el-textarea__inner {
				resize: none;
				font-size: 16px;
				color: rgba(0, 76, 167, 1);
			}
		}
	}
</style>
<style scoped lang="less">
	.assessment-edit-plan-container {
		.assessment-design {
			padding: 25px 38px !important;
			
			
		}
		.button-group {
			text-align: center;
			> div {
				display: inline-block;
				font-size: 18px;
				padding: 6px 22px;
				border-radius: 6px;
				&:nth-child(1) {
					color: #F3B815;
					border: 1px solid #F3B815;
					background: #FFF6EF;
					margin-right: 139px;
				}
				&:nth-child(2) {
					color: #02C86C;
					border: 1px solid #02C86C;
					background: #F1FFF8;
				}
			}
		}
	}
</style>